/* 基础变量 */
@import "../../style/base/base";

header {
  @include wid100;
  @include abs;
  top: 0;
  left: 0;
  background: $cr-f;
  height: 50px;
}

.header-msg {
  @include wid100;
  @include higt100;
  @include pdLR(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: $cr-f;
  background: $color;
}

.header-msg div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

// 公司标志和名称
.platform-info {
  color: #F9F9F7;
  font-size: $ft-sz;
  font-weight: bold;
  .platform-img {
    height: 30px;
    width: 28px;
    @include mgR(7px);
  }
}

// 用户信息
.header-msg .user-box {
  @include higt100;
}

.user-box button.el-button--text.logoutBtn {
  padding-left: 10px;
}

.user-info {
  @include higt100;
  @include pdA(10px);
  border-left: 1px solid #2F6ED5;
  border-right: 1px solid #2F6ED5;
  display: flex;
  justify-content: center;
  > button > span {
    display: flex;
    align-items: center;
    color: $cr-f;
    font-size: $sz12;
  }
  .user-icon {
    width: 30px;
    height: 30px;
    img {
      @include border-radius(50%);
      @include pdR(6px);
    }
  }
}

// 消息
.notice-box {
  @include rel;
  @include higt100;
  width: 50px;
  display: flex;
  justify-content: center;
  border-right: 1px solid #2F6ED5;
  .notice-num {
    @include border-radius(50%);
    @include pdA(2px);
    @include abs;
    color: $cr-f;
    font-size: 8px;
    background: #D0021B;
    top: 10px;
    min-width: 14px;
    height: 14px;
  }
  .notice-icon {
    width: 15px;
    img {
      width: 100%;
    }
  }
}

// 账户信息和账户设置
.account-box {
  font-size: 12px;
  width: 100%;
  .account-operate {
    height: 40px;
    line-height: 50px;
    border-bottom: 1px solid #D6D7DC;
    display: flex;
    justify-content: space-between;
    > span:last-child {
      color: #3277E9;
      cursor: pointer;
    }
  }
  .account-info ul {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    cursor: pointer;
    margin-top: 10px;
    li {
      width: 100%;
      position: relative;
      height: 28px;
      line-height: 28px;
      > span {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    li::before {
      content: '';
      width: 7px;
      height: 7px;
      display: inline-block;
      position: absolute;
      left: -10px;
      top: 50%;
      margin-top: -3px;
      border-radius: 50%;
      background-color: #3190E9;
    }
    .yellow-cir::before {
      background-color: #FFA300;
    }
    .green-cir::before {
      background-color: #A9EC78;
    }
    .purple-cir::before {
      background-color: #787BEC;
    }
  }
}

// 修改用户信息的弹窗
.edit-info-dialog .el-dialog {
  max-width: 600px;
}

.edit-info-box {
  .info-img {
    text-align: center;
    .head-icon {
      margin-bottom: 20px;
    }
    .has-no-img {
      width: 100px;
      border-radius: 50%;
      background-color: #CBD1DA;
    }
  }
  .info-form {
    margin-top: 20px;
  }
}

// 消息通知弹出框
.msg-dialog {
  height: 90vh;
  .el-dialog__body {
    padding: 0 20px;
    height: 94%;
    .dialog-body {
      height: 100%;
      position: relative;
    }
  }
  .el-dialog__footer {
    @include wid100;
    @include abs;
    bottom: 0px;
    right: 0px;
    padding: 0;
    border-top: 1px solid #D7DEE6;
    .pageBar #pageBar {
      background-color: #f6f6f6;
      height: 7%;
      padding: 10px;
    }
  }
  .el-dialog__header {
    background-color: #3F8DE0;
    text-align: center;
    height: 6%;
    padding: 10px;
    cursor: move;
    .el-dialog__title {
      color: #fff;
      font-size: 16px;
      line-height: 20px;
    }
    .el-icon-success:before {
      color: $color;
    }
  }
  .close-dialog {
    height: 21px;
    width: 21px;
    position: absolute;
    right: 0px;
    top: -3%;
    margin-top: -15px;
  }
  .msg-box {
    height: 100%;
    .el-collapse-item__header {
      height: 7%;
      line-height: 20px;
    }
    .msg-content {
      height: 100%;
    }
    .msg-content .msg-header {
      display: flex;
      justify-content: space-between;
      height: 8%;
      line-height: 50px;
      border-bottom: 1px solid #D6D7DC;
      .unread-msg {
        color: #E0463F;
      }
    }
    .no-msg {
      text-align: center;
      height: 60px;
      line-height: 60px;
      color: #9B9B9B;
      border-bottom: 1px solid $cr-e;
    }
    .msg-content .msg-main {
      font-size: $sz12;
      height: 92.5%;
      .msg-coll {
        display: none;
      }
      .msg-coll.close {
        display: none;
      }
      .msg-coll.open {
        display: block;
        transition: all 1s linear;
        -webkit-transition: all 1s linear;
        -o-transition: all 1s;
      }
      .msg-show {
        height: 10%;
      }
      .msg-show.open {
        height: 16%;
      }
      .msg-show.close {
        height: 10%;
      }
      .msg-item {
        height: 100%;
        border-bottom: 1px solid $cr-e;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
        @include pdL(20px);
        width: 100%;
        @include rel;
        .item-content {
          @include rel;
        }
        .item-content::before {
          width: 16px;
          height: 16px;
          display: inline-block;
          content: '';
          @include abs;
          top: 0px;
          left: -20px;
          background: url("/static/img/header/msgUnRead.png") no-repeat center;
          background-size: 100%;
        }
        .item-content.has-read::before {
          background-image: url("/static/img/header/msgHasRead.png");
        }
        .msg-head {
          display: flex;
          justify-content: space-between;
          line-height: 20px;
          .msg-title:hover {
            text-decoration: underline;
            color: $color;
          }
          .msg-date {
            color: #636D79;
          }
        }
        .msg-text {
          width: 80%;
          color: #9B9B9B;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        @keyframes fade {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        .animated {
          animation-duration: 1s;
          animation-fill-mode: both;
        }
        .fadeIn {
          animation-name: fade;
          animation-direction: normal;
        }
      }
    }
  }
}

.exit-button {
  width: 18px;
}
